<template>
  <div class="about">
    <div class="about-title">
      <span class="tabitem border-bottom">门票</span>
      <span class="tabitem">景区服务</span>
      <span class="tabitem">一日游</span>
      <span class="tabitem">热销门票</span>
    </div>
    <div class="titck-type" v-for="item of ticketList" :key="item.id">
      <span class="iconfont font">&#xe61e;</span>
      <span> {{item.name}}</span>
      <div class="list">
        <div class="type-info" v-for="scene of item.children" :key="scene.id" >
          <div class="type-name" @click="develop(scene.id)">
            <h5>{{scene.name}}</h5>
            <div class="type-price">
               <em class="price-num">¥ {{scene.lowerPrice}}</em>
               <span class="numword">起</span>
            </div>
          </div>
          <detail-gallery :ticketList="scene.children" v-show="isShow.includes(scene.id)"></detail-gallery>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailGallery from './Gallery.vue'
export default {
  name: 'DetailsAbout',
  components: {
    DetailGallery
  },
  data () {
    return {
      isShow: []
    }
  },
  methods: {
    develop (id) {
      if (!this.isShow.includes(id)) {
        this.isShow.push(id)
      } else {
        let newIds = this.isShow.filter((scer) => {
          return scer !== id
        })
        this.isShow = newIds
      }
    }
  },
  props: {
    ticketList: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .about
    position relative
    background #FFFFFF
    margin-bottom 0.2rem
    .titck-type
      padding 0.2rem 0
      .font
        background #00BCD4
        border-radius 50%
        color white
        padding 0.02rem
        margin-left 0.15rem
    .about-title
      position relative
      background-color #fff
      color #212121
      height .96rem
      line-height .96rem
      white-space nowrap
      overflow-x auto
      .tabitem
        display inline-block
        height .92rem
        line-height .96rem
        width 2.4rem
        text-align center
        font-size .32rem
    .list
      .type-info
        position relative
        z-index 2
        margin-bottom -.02rem
        background #fff
        .type-name
          padding 0.2rem 0.1rem
          color #333
          font-size .3rem
          line-height .48rem
        .type-price
          right .46rem
          margin-top -0.5rem
          color #ff9800
          font-size .24rem
          overflow hidden
          float right
          height .4rem
          line-height .4rem
          .price-num
            margin-left .04rem
            font-size .4rem
          .numword
            color #666666

</style>
